<template>
  <div class="loading">
    <img class="loading-img" src="../assets/images/loading.gif" />
    <p class="loading-text">{{ $t('loading') }}</p>
  </div>
</template>

<script>
export default {
  name: 'LoadingPage'
};
</script>
<style lang="scss" scoped>
@keyframes loading {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

.loading {
  width: 164px;
  height: 96px;
  margin: 160px auto 0;
}

.loading-img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  margin: 0 50px 8px 50px;
}

.loading-text {
  font-size: 16px;
  color: rgba(12, 12, 28, 0.7);
  text-align: center;
  line-height: 24px;
}
</style>
